<template>
  <zm-view ref="view" background="#fff" :scroll="false">
    <zm-list ref="list" :options="options" @query="handleQuery">
      <view v-for="(item, index) in list" :key="index" class="solid-2 radius-16 mx-24 mt-20 px-20 py-26 flex flex-col bg-white">
        <view class="flex items-center justify-between">
          <text class="font-30">{{ item.realName }}</text>
          <view class="flex relative">
            <u-icon name="more-dot-fill" color="#666666" size="32rpx" bold @click="onClickMore(index)"></u-icon>
            <zm-transition mode="fade-zoom" :show="select === index">
              <view class="popover-wrap">
                <text class="op-btn" @click="onClickEdit(item)">编辑</text>
                <text class="op-btn" @click="onClickDelete(item)">删除</text>
              </view>
            </zm-transition>
          </view>
        </view>
        <text class="text-999 font-26 mt-16">身份证 {{ item.idCardNo }}</text>
      </view>
    </zm-list>
    <zm-footer background="#fff">
      <view class="p-24">
        <zm-button size="large" round @click="toView({ url: 'pages/person/viewer-edit/viewer-edit', login: true })">添加观影人</zm-button>
      </view>
    </zm-footer>
  </zm-view>
</template>
<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  name: "customer-list",
  components: {},
  mixins: [hook, page],
  data() {
    return {
      options: {
        auto: false,
        emptyText: "暂无观影人信息"
      },
      list: [],
      select: -1
    }
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.list.refresh()
    })
  },
  methods: {
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await uni.$api.user.getRealNameList({ page, pageSize })
        this.list = type == "load" ? [...this.list, ...res.list] : res.list
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    },
    onClickMore(index) {
      if (this.select !== index) {
        this.select = index
      } else {
        this.select = -1
      }
    },
    // 编辑
    onClickEdit(item) {
      this.select = -1
      uni.$setCache("edit-viewer", item)
      this.toView({
        url: "pages/person/viewer-edit/viewer-edit",
        login: true,
        params: { type: "edit" }
      })
    },
    // 删除
    async onClickDelete(item) {
      this.select = -1
      await uni.$confirm({ content: "是否确定删除该观影人？" })
      uni.$toast({ type: "success", content: "删除成功" })
      await uni.$api.user.delRealName({ realNameId: item.realNameId })
      this.$refs.list.refresh()
    },
    // 更多
    handelShowMore(item) {
      item.active = !item.active
    }
  }
}
</script>
<style scoped lang="scss">
.popover-wrap {
  top: 50%;
  right: 50rpx;
  height: 70rpx;
  display: flex;
  padding: 15rpx 0;
  color: #ffffff;
  position: absolute;
  align-items: center;
  background: #333333;
  border-radius: 12rpx;
  transform: translateY(-50%);
  &::after {
    top: 50%;
    right: -8rpx;
    width: 0;
    height: 0;
    content: "";
    position: absolute;
    transform: translateY(-50%);
    border-radius: 2rpx;
    border-top: 8rpx solid transparent;
    border-bottom: 8rpx solid transparent;
    border-left: 8rpx solid #333333;
  }
  .op-btn {
    height: 100%;
    display: flex;
    padding: 0 24rpx;
    align-items: center;
    white-space: nowrap;
    &:first-child {
      border-right: 2rpx solid #fff;
    }
  }
}
</style>
